<!--
 * @Descripttion: |
 * @version: 1.0
 * @Author: 王娆
 * @Date: 2020-09-02 20:22:04
 * @LastEditors: 王娆
 * @LastEditTime: 2020-09-04 14:34:55
-->
<template>
  <div class="register">
    <header>
      <van-icon name="arrow-left" color="#fff" size="48px" />
      <span>注册</span>
    </header>
    <main>
      <!-- 登录表单部分 -->
      <van-form @submit="onSubmit">
        <van-field v-model="registerForm.username" name="用户名" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="registerForm.password" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">注册</van-button>
        </div>
        <div class="as">
          <a @click="$router.push('/login')">账号密码登录</a>
        </div>
      </van-form>
    </main>
    <footer>
      <p>注册即代表阅读及同意<span style="color:#07c160">用户协议</span></p>
    </footer>
  </div>
</template>

<script>
import { registerUrl, repeatUsername} from '../../api/user'
export default {
  data () {
    return {
      registerForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async onSubmit () {
      const data = await repeatUsername(this.registerForm.username);
      if(data.data === 1){
        this.$toast.fail('用户名重复')
        return
      }
      if(data.data === 0){
        const data = await registerUrl(this.registerForm)
        this.$router.push('/login')
        this.$toast.success('注册成功')
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.register {
  display: flex;
  flex-direction: column;
  height: 100%;
}
header {
  background: #07c160;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  i {
    flex: 1;
    text-align: center;
  }
  span {
    flex: 5;
    color: #fff;
    font-size: 22px;
    margin-left: 130px;
  }
}
main {
  padding: 0 20px;
  overflow: auto;
  height: 100%;
  .van-form {
    margin-top: 20px;
    .van-field {
      margin-bottom: 10px;
    }
  }
  .as {
    a {
      color: #07c160;
      font-size: 14px;
    }
  }
}
footer {
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 14px;
}
</style>